<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交易统计</title>
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../js/bootstrap-table/bootstrap-table.min.css"/>
    <link rel="stylesheet" href="../../css/common.css"/>
    <style>

        body{
            background-color: #FCF8F5;
        }
        .explain {
            margin-bottom: 20px;
            margin-top: 15px;
            background-color: white;
        }
        .explain2{
            background-color: white;
        }
        .explain2 .top2{
            padding-top: 20px;
            margin-left: 20px;
            margin-bottom: 20px;
        }
        .explain2 .bootstrap-table{
            margin-left: 20px;
        }
        .explain2 .bootstrap-table .table-responsive{
            margin-top: 0px;

        }
        .explain2 .bootstrap-table thead{
            background-color: white;
            text-align: center;
        }

        .explain2 .bootstrap-table thead th .th-inner{
            text-align: center;
        }

        .explain div{
            margin-left: 20px;
        }
        .top{
            margin-top: 20px;
            padding-top: 20px;
        }

        #data-scale{
            margin-top: 20px;
            border: 1px solid #eee;
        }

        #myTab li{
            width: auto;
            padding-left: 20px;
        }
        #myTab li a{width: auto;}

        #table th ,td{
            background-color: white;
            text-align: center;
        }

    </style>
</head>
<body>
<div>
    <ul id="myTab" class="nav nav-tabs">
        <li class="active">
            <a href="#scale" data-toggle="tab">
                <div>买家人数</div>
                <div>The number of buyers</div>
            </a>
        </li>
        <li><a href="#list" data-toggle="tab">
            <div>产品销量</div>
            <div>Commodity sales statistics</div>
        </a></li>

    </ul>



    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="scale">
            <div class="explain">
                <div class="top">最近一周商品销量统计<br>Statistics on the number of bugers in the last week</div>

            <div id="data-scale"></div>
            </div>
        </div>
        <div class="tab-pane fade" id="list">
            <div class="explain2">
                <div class="top2">最近一周商品销量统计 <br>Sales of goods in the last week</div>
                <table class="table table-hover " id="table"> </table>
            </div>

        </div>


    </div>

</div>

</body>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/transaction/highcharts.js"></script>
<script src="../../js/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../../js/common.js"></script>
<script>
    $(function () {
        getStatistical();
        init() ;
    });

    /*
     * @description :初始化
     * @params:
     * @author : peng huaneng
     * @date : 2018/1/18 17:33
     */
    function init() {
        $(function(){
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                // 获取已激活的标签页的名称
                var activeTab = $(e.target).text();
                //console.log(activeTab);
                if(activeTab.indexOf("买家人数")!=-1){
                    getStatistical();//获取 下单人数比 的统计图
                }else{
                    getSalesCount() ;

                }

            });
        });
    }

    function getSalesCount() {

        $('#table').bootstrapTableEx({

            height: $(window).height() - 54,
            queryParams: function (params) {
                return params;
            },
            columns: [{
                checkbox: true
            }, {
                field: 'id',
                title: '商品ID<br>Product ID',
                formatter: function (value, row, index) {
            var html = '<div >' +
                '<span style="color: #D68766" >'+row.id+'</span>' +
                '</div>';
            return html;
        }

            }, {
                field: 'productName',
                title: '商品名<br>Product name',
                formatter: function (value, row, index) {
                    var html = '<div class="text-left">' +
                                '<div >'+row.productName+'</div>' +
                                 '</div>';
                    return html;
                }
            }, {
                field: 'sales',
                title: '销量<br>Sales volume'
            }
            ],
            data: [{
                "id": 1218954466,
                "productName": "牛肉",
                "sales": "50kg"
            }, {
                id: 34235,
                "productName": "猪肉",
                "sales": "30kg"
            }]
        });
    }


    /*
     * @description : 获取浏览 下单人数比
     * @params:
     * @author : peng huaneng
     * @date : 2018/1/17 9:38
     */
    function getStatistical() {
        $('#data-scale').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: ''
            },
            colors:[
                '#FFDCC9'
            ],
            tooltip: {
                headerFormat: '{series.name}<br>',
                pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: '预览下单比1',
                data: [
                    ['浏览人数', 10],
                    ['下单人数', 5]
                ]
            }]

        }, function (chart) {
            SetEveryOnePointColor(chart);
        });
    }

    //设置每一个数据点的颜色值
    function SetEveryOnePointColor(chart) {
        //定义一个全局颜色数组
        var colorArr = ['#ED991F', '#FA6F10'];
        //获得第一个序列的所有数据点
        var pointsList = chart.series[0].points;
        console.log(chart.series[0]);
        console.log(pointsList);
        //遍历设置每一个数据点颜色
        for (var i = 1; i < pointsList.length; i++) {
            chart.series[0].points[i].update({
                color: {
                    linearGradient: {x1: 1, y1: 0, x2: 0, y2: 0}, //横向渐变效果 如果将x2和y2值交换将会变成纵向渐变效果
                    stops: [
                        [0, Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')],
                        [1, 'rgb(255, 255, 255)']
                    ]
                }
            });
        }
    }
</script>
</html>